<template>
  <div class="py-5">
    <div class="container">
      <div class="row mb-4">
        <div class="col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><NuxtLink to="/">首页</NuxtLink></li>
              <li class="breadcrumb-item active" aria-current="page">联系我们</li>
            </ol>
          </nav>
        </div>
        <div class="col-12 text-center mb-5">
          <h1 class="fw-bold">联系我们</h1>
          <p class="text-muted lead">有任何问题或建议？随时与我们联系</p>
        </div>
      </div>
      
      <div class="row">
        <div class="col-lg-7 mb-5 mb-lg-0">
          <div class="card border-0 shadow-sm">
            <div class="card-body p-5">
              <h3 class="fw-bold mb-4">发送消息</h3>
              <form>
                <div class="row">
                  <div class="col-md-6 mb-3">
                    <label class="form-label">姓名 *</label>
                    <input type="text" class="form-control" required>
                  </div>
                  <div class="col-md-6 mb-3">
                    <label class="form-label">邮箱 *</label>
                    <input type="email" class="form-control" required>
                  </div>
                </div>
                <div class="mb-3">
                  <label class="form-label">主题</label>
                  <input type="text" class="form-control">
                </div>
                <div class="mb-3">
                  <label class="form-label">消息内容 *</label>
                  <textarea class="form-control" rows="5" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发送消息</button>
              </form>
            </div>
          </div>
        </div>
        
        <div class="col-lg-5">
          <div class="card border-0 shadow-sm mb-4">
            <div class="card-body p-5">
              <h3 class="fw-bold mb-4">联系方式</h3>
              
              <div class="d-flex mb-4">
                <div class="me-3 text-primary">
                  <i class="bi bi-geo-alt fs-4"></i>
                </div>
                <div>
                  <h5 class="fw-bold">办公地址</h5>
                  <p class="mb-0">北京市朝阳区旅游大厦18层</p>
                </div>
              </div>
              
              <div class="d-flex mb-4">
                <div class="me-3 text-primary">
                  <i class="bi bi-telephone fs-4"></i>
                </div>
                <div>
                  <h5 class="fw-bold">联系电话</h5>
                  <p class="mb-0">+86 10 1234 5678</p>
                  <p class="mb-0">+86 10 8765 4321</p>
                </div>
              </div>
              
              <div class="d-flex mb-4">
                <div class="me-3 text-primary">
                  <i class="bi bi-envelope fs-4"></i>
                </div>
                <div>
                  <h5 class="fw-bold">电子邮箱</h5>
                  <p class="mb-0">info@travelexplorer.com</p>
                  <p class="mb-0">support@travelexplorer.com</p>
                </div>
              </div>
              
              <div class="d-flex">
                <div class="me-3 text-primary">
                  <i class="bi bi-clock fs-4"></i>
                </div>
                <div>
                  <h5 class="fw-bold">工作时间</h5>
                  <p class="mb-0">周一至周五: 9:00 - 18:00</p>
                  <p class="mb-0">周六: 10:00 - 16:00</p>
                  <p class="mb-0">周日: 休息</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card border-0 shadow-sm">
            <div class="card-body p-5">
              <h3 class="fw-bold mb-4">关注我们</h3>
              <div class="d-flex justify-content-around">
                <a href="#" class="text-decoration-none">
                  <div class="text-center">
                    <div class="rounded-circle bg-primary d-inline-flex align-items-center justify-content-center mb-2" 
                         style="width: 50px; height: 50px;">
                      <i class="bi bi-facebook text-white"></i>
                    </div>
                    <div class="text-muted">Facebook</div>
                  </div>
                </a>
                <a href="#" class="text-decoration-none">
                  <div class="text-center">
                    <div class="rounded-circle bg-info d-inline-flex align-items-center justify-content-center mb-2" 
                         style="width: 50px; height: 50px;">
                      <i class="bi bi-twitter text-white"></i>
                    </div>
                    <div class="text-muted">Twitter</div>
                  </div>
                </a>
                <a href="#" class="text-decoration-none">
                  <div class="text-center">
                    <div class="rounded-circle bg-danger d-inline-flex align-items-center justify-content-center mb-2" 
                         style="width: 50px; height: 50px;">
                      <i class="bi bi-instagram text-white"></i>
                    </div>
                    <div class="text-muted">Instagram</div>
                  </div>
                </a>
                <a href="#" class="text-decoration-none">
                  <div class="text-center">
                    <div class="rounded-circle bg-danger d-inline-flex align-items-center justify-content-center mb-2" 
                         style="width: 50px; height: 50px;">
                      <i class="bi bi-youtube text-white"></i>
                    </div>
                    <div class="text-muted">YouTube</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row mt-5">
        <div class="col-12">
          <div class="bg-light rounded-3" style="height: 400px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

useHead({
  title: '联系我们 - TravelExplorer'
})
</script>